body,html{
  height: 100%;
}
.login-page{
  background: url("../../images/login/bg-login.png")  no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.login-main{
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    padding: 40px;

    .vertical-level(160px,800px,50%,50%);

    .tips{
      width: 200px;
      height: 40px;
      border-radius: 5px;
      margin: 0 auto;
      .resp-msg{
        text-align: center;
        border-radius: 4px;
        padding: 4px;
        margin: 14px 62px 0 -48px;

        .alert-danger{
          background: #F2DEDE;
        }
        .alert-success{
          background: #DFF0D8;
        }
      }      
    }
}

.login-part{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #e4ebf0;
    line-height: 40px;
    position: relative;
    box-sizing: border-box;
    padding-right: 5px;
    padding-left: 24px;
    margin-top: 20px;

    input {
        text-indent: 15px;
        border: 0;
        background: transparent;
        outline: 0;
        width: 90%;
        height: 40px;
        font-size: 1.2em;
        color: @more-black;
        display: block;
        top: 50%;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }    
}


.lg-icon {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 10px;
    margin-left: -20px;
    color: @normal-white;
    font-size: 1.3em;
}

.botton-line {
    display: block;
    height: 2px;
    position: absolute;
    background-color: @base-color;
    bottom: -1px;
    width: 0;
    left: 50%;
    -webkit-transition: width .2s ease-in,left .2s ease-in;
    -moz-transition: width .2s ease-in,left .2s ease-in;
    -ms-transition: width .2s ease-in,left .2s ease-in;
    -o-transition: width .2s ease-in,left .2s ease-in;
    transition: width .2s ease-in,left .2s ease-in
}

.active-line {
    width: 100%;
    left: 0;
    -webkit-transition: width .3s cubic-bezier(0.66,1.65,.23,.87),left .3s cubic-bezier(0.66,1.65,.23,.87);
    -moz-transition: width .3s cubic-bezier(0.66,1.65,.23,.87),left .3s cubic-bezier(0.66,1.65,.23,.87);
    -ms-transition: width .3s cubic-bezier(0.66,1.65,.23,.87),left .3s cubic-bezier(0.66,1.65,.23,.87);
    -o-transition: width .3s cubic-bezier(0.66,1.65,.23,.87),left .3s cubic-bezier(0.66,1.65,.23,.87);
    transition: width .3s cubic-bezier(0.66,1.65,.23,.87),left .3s cubic-bezier(0.66,1.65,.23,.87)
}

/*登陆特效*/

.button {
    float: left;
    min-width: 100px;
    max-width: 250px;
    display: block;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    color: @more-black;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    border-color: @base-color;
    margin-top: 22px;
    &:focus{
        outline: none;
    }
}

.button--antiman {
    background: none;
    border: none;
    height: 40px;
    border-radius: 20px;
    &:before{
      content: '';
      z-index: -1;
      border-radius: inherit;
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
      transition: transform 0.5s, opacity 0.5s;
      -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
      transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

      border: 2px solid #ffb300;
      border-color:@base-color; 
      opacity: 0;
      -webkit-transform: scale3d(1.2, 1.2, 1);
      transform: scale3d(1.2, 1.2, 1);
      border-width: 2px;
    }

    &:after{
      content: '';
      z-index: -1;
      border-radius: inherit;
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
      transition: transform 0.5s, opacity 0.5s;
      -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
      transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
      background: @normal-white;

    }
    &:hover{
      /*color:@normal-white;*/
      &:before{
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
      &:after{
        opacity: 0;
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
      }
    }
}





